<template>
  <div class="goods-list">
      <el-row :gutter="16" style="line-height:40px">

        <!-- <el-col :span="1">
          <div class="label-wrap category">
            <label for="">编号：</label>
          </div>
        </el-col>
        <el-col :span="3">
          <el-input v-model="prod_code" size="small" placeholder="请输入编号" style="width:100%"></el-input>
        </el-col> -->

        <el-col :span="2">
          <div class="label-wrap category">
            <label for="">车辆牌照：</label>
          </div>
        </el-col>
        <el-col :span="4">
          <el-input v-model="carNumber" size="small" placeholder="请输入牌照" style="width:100%"></el-input>
        </el-col>

        <el-col :span="2">
          <el-button type="primary" size="mini" style="width:80px" @click="searchCar" icon="el-icon-search">搜索</el-button>
        </el-col>
        <el-col :span="5">
          <el-button type="primary" size="mini" 
          style="width:100px;margin-left:90px;margin-right:20px" @click="addCarinfo" icon="el-icon-plus">新增车辆</el-button>
        </el-col>
        <!-- <el-col :span="8">
          <el-button type="primary" size="mini" style="width:90px" icon="el-icon-download" @click="outputTable">导出</el-button>
        </el-col> -->
      </el-row>

      <div class="autospace"></div>

      <el-row>
        <el-col :span="24">
          <el-table :data="tableData" border style="width: 100%" v-loading="loading">
            <!-- <el-table-column type="selection" width="50"></el-table-column> -->
            <el-table-column label="车辆图片" width="80">
              <template slot-scope="scope">
                <div>
                  <img style="width:50px;height:50px;margin-top:5px" :src="scope.row.carImg" alt="">
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="carNumber" label="车辆牌照"></el-table-column>
            <el-table-column prop="categoryTwoName" label="车辆细类"></el-table-column>
            <el-table-column prop="carReamrks" label="备注"></el-table-column>
            <el-table-column label="操作" width="350">
              <template slot-scope="scope">
                  <el-button size="mini" icon="el-icon-reading" @click="viewCarProd(scope.row)">查看装备</el-button>
                <el-button size="mini" icon="el-icon-edit" @click="editCarInfo(scope.row)">修改</el-button>
                <el-button size="mini" icon="el-icon-delete" @click="delCarInfo(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>

      

      <div class="autospace"></div>

      <!-- <el-row>
        <el-col :span="24">
          <el-pagination
            class="pull-left"
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[10]"
            layout="total, prev, pager, next"
            :total="20">
          </el-pagination>
        </el-col>
      </el-row> -->

     <!-- 弹窗信息 -->
      <addcar :choseCar="choseCar" :dialogInfo.sync="dialogInfo"></addcar>

      <excel style="display:none" :excelname="excelname" :outPutKey="outputKey" :tableData="tableData" :trueOutExecl.sync="trueOutExecl"></excel>
    
  </div>
</template>

<script>
import excel from '../test/excel';
import { GetAllCar, DelCarInfo, SelectByCar } from '@/api/car';
import addcar from './addcar'
export default {
  name: 'goodslist',
  components: {
    addcar,
    excel
  },
  data() {
    return {
      loading: true,
      dialogInfo: false,
      trueOutExecl: false,  // 确认是否导出
      outputKey: [],
      excelname: '装备列表',  // 导出表格名字
      categoryvalue: '',
      prod_code: '',
      carNumber: '',
      prodCatelist: [],
      isSearch: false,
 
      choseCar: {},
      tableData: []
    }
    
  },
  watch: {
    dialogInfo(newVal) {
      if (!newVal) {
        if (this.isSearch) {
          this.searchCar()
        } else {
          this.getAllcarInfo()
        }  
      }
    }
  },
  methods:{
    handleSizeChange(val) {
        console.log(val)
    },
    handleCurrentChange(val) {
      console.log(val)
    },
    // 搜索商品信息
    searchCar() {
      this.loading = true;
      let reqData = {
        carNumber: this.carNumber,
      }
      SelectByCar(reqData).then( res => {
        this.tableData = res.data
        this.isSearch = true;   // 此时处于搜索状态
        this.loading = false;
      })
    },
    addCarinfo() {
      this.dialogInfo = true;
      this.choseCar = null;
    },
    // 导出表格
    outputTable() {
      this.trueOutExecl = !this.trueOutExecl;
      this.outputKey = [{
            prodImg:'装备图片',
            prodName: '装备名称',
            prodCode: '装备编号',
            prodCategory: '装备类别',
            prodSpecial: '规格',
            emit: '单位',
            supplierName: '供应商名称',
            prodId: '装备ID'
      }]
    },
    
    // 获取所有车辆信息
    getAllcarInfo() {
      GetAllCar().then( response => {
        let data = response.data;
        this.tableData = data;
        this.loading = false;
      }).catch( error => {
        console.log(error)
      })
    },
   
    // 查看车辆所有装备
    viewCarProd(item) {
        this.$router.push({
            path: '/carprods',
            query: {
                carId: item.carId
            }
        })
    },
    editCarInfo(data) {
      this.dialogInfo = true;
      this.choseCar = data;
    },
    delCarInfo(el) {
      this.$confirm('此操作将删除当前车辆, 是否继续?')
      .then( () => {
        DelCarInfo(el.carId).then( res => {
          let data = res.data
          this.$message({
              message: data.msg,
              type: 'success'
          })
          this.getAllcarInfo()
        })
      }).catch(() => {
        return
      })
    },
  },

  mounted() {
    this.getAllcarInfo();
  }
}
</script>

<style lang="scss" scoped>
@import '../../styles/config.scss';

  .label-wrap {
    &.category { @include labelwrap(left,70,40); }
    &.date {
      @include labelwrap(center,50,40); }
    &.keyword { @include labelwrap(right,110,40); }
  }
  .autospace {
    height: 30px;
  }
  
</style>
  
